<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>返回</text>
			</view>
			<view class="head_mid">
				新朋友
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="body">
			<view v-for="(item,index) in AllNewFriend" class="body_item" @tap="toDetial(item.To_Account,item.AddWording)" :key="index">
				<view class="body_item_left_box">
					<view class="body_item_left">
						<image class="headImg" src="../../../static/avatar.jpg" mode=""></image>
						<image class="country" src="../../../static/meiguo.png" mode=""></image>
					</view>
					<view class="body_item_mid">
						<text class="nickname">{{item.Nick}}</text>
						<text class="sayHellow">{{item.AddWording}}</text>
					</view>
				</view>

				<view class="body_item_right">
					<text class="time">{{item.AddTime}}</text>
					<text class="state1" @tap.stop="responseFriend(item.To_Account)">同意</text>
				</view>
				<view class="bottomborder">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import webim from '../../../common/webim_wx.min.js' //腾讯云im包
	// import webimhandler from '../../../common/webim_handler.js' //这个是所有事件的腾讯js，这个页面需要用到登录
	// 	import {
	// 		app
	// 	} from 'common/sdkConfig.js'
	export default {
		data() {
			return {
				user_info: '',
				AllNewFriend: [],
				userMsg: []
			};
		},
		onShow() {
			this.user_info = uni.getStorageSync('user_info')
			this.getPendency()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toDetial(id, AddWording) {
				uni.navigateTo({
					url: `/pages/Friend/setNewFriend/setNewFriend?id=${id}&&AddWording=${AddWording}`
				})
			},

			//读取好友申请列表
			//notifyFlag： true表示来自好友系统通知触发，false表示用户主动点击【获取好友申请】菜单
			getPendency(notifyFlag) {
				// initGetPendencyTable([]);
				var that = this
				console.log(this.user_info.user_id)
				var totalCount = 50; //每次接口请求的条数，bootstrap table 分页时用到
				var options = {
					//请求发起方的帐号，一般情况下为用户本人帐号，在管理员代替用户发起请求的情况下，这里应该填写被代替的用户的帐号
					'From_Account': this.user_info.user_id,
					//Pendency_Type_ComeIn: 别人发给我的; Pendency_Type_SendOut: 我发给别人的
					'PendencyType': 'Pendency_Type_ComeIn',
					// 'PendencyType': 'Pendency_Type_SendOut',
					//好友申请的起始时间
					'StartTime': 0,
					//分页大小，如果取值为30 则表示客户端要求服务器端每页最多返回30个好友申请
					'MaxLimited': totalCount,
					//好友申请数据的版本号，用户每收到或删除一条好友申请，服务器端就自增一次好友申请数据版本号，一般传0，表示拉取最新的数据
					'LastSequence': 0,
				};

				webim.getPendency(
					options,
					function(resp) {
						console.log(JSON.stringify(resp))
						var data = [];
						var dataID = []
						if (resp.UnreadPendencyCount > 0) { //存在未读未决
							for (var i in resp.PendencyItem) {
								var apply_time = webim.Tool.formatTimeStamp(resp.PendencyItem[i].AddTime);
								var nick = webim.Tool.formatText2Html(resp.PendencyItem[i].Nick);
								if (nick == '') {
									nick = resp.PendencyItem[i].To_Account;
								}
								var addWording = webim.Tool.formatText2Html(resp.PendencyItem[i].AddWording);
								dataID.push({
									id: webim.Tool.formatText2Html(resp.PendencyItem[i].To_Account)
								})
								data.push({
									To_Account: webim.Tool.formatText2Html(resp.PendencyItem[i].To_Account),
									Nick: nick,
									AddWording: addWording,
									AddSource: resp.PendencyItem[i].AddSource,
									AddTime: apply_time
								});
							}
							// console.log(parseInt(data[0].To_Account))
							console.log(JSON.stringify(dataID) + '所有用户ID')
							// 							var dataMsg = {
							// 								id : parseInt(data[0].To_Account)
							// 							}
							// 								that.myAjaxNew({
							// 								model: 'user',
							// 								controllerName: 'userInfo',
							// 								actionName: 'findById',
							// 								data: dataMsg,
							// 								successBack: function(res) {
							// 									console.log(JSON.stringify(res) + '用户数据')
							// 									that.userMsg = res
							// 								}
							// 							})  //需要传一个id数组到后台，获取批量用户数据之后push进data之中。

							that.AllNewFriend = data
							console.log(JSON.stringify(that.AllNewFriend) + '所有用户数据')
							// 							$('#get_pendency_table').bootstrapTable('load', data);
							// 							$('#get_pendency_dialog').modal('show');
						} else {
							if (!notifyFlag) {
								uni.showToast({
									title: '没有加好友申请',
									icon: 'none'
								})
							}
						}

					},
					function(err) {
						uni.showToast({
							title: err.ErrorInfo,
							icon: 'none'
						})
					}
				);
			},
			responseFriend(id) {
				var response_friend_item = [{
					'To_Account': id,
					"ResponseAction": 'Response_Action_AgreeAndAdd'
					//类型：Response_Action_Agree 或者 Response_Action_AgreeAndAdd
				}];
				var options = {
					'ResponseFriendItem': response_friend_item
				};
				webim.responseFriend(
					options,
					function(resp) {
						//在表格中删除对应的行
						if (response_friend_item[0].ResponseAction ==
							'Response_Action_AgreeAndAdd') {
							getAllFriend(getAllFriendsCallbackOK);
						}
						console.log('处理好友申请成功');
					},
					function(err) {
						alert(err.ErrorInfo);
					}
				);
			},

		},
	}
</script>

<style scoped>
	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 128upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
		position: fixed;
		top: 0;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;

	}

	.head_right {
		width: 106upx;
	}

	.body {
		padding-top: 148upx;
	}

	.body_item {
		background: #FFFFFF;
		padding: 24upx 24upx;
		display: flex;
		justify-content: space-between;
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	.body_item_left_box {
		display: flex;

	}

	.body_item_left {
		position: relative;
	}

	.headImg {
		width: 106upx;
		height: 106upx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 28upx;
	}

	.country {
		height: 36upx;
		width: 36upx;
		position: absolute;
		left: 0upx;
		bottom: 0upx;
	}

	.body_item_mid {
		display: flex;
		flex-direction: column;
	}

	.body_item_mid text {
		max-width: 415upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.nickname {
		color: #333333;
		font-size: 32upx;
		margin-bottom: 25upx;
	}

	.sayHellow {
		color: #666666;
		font-size: 26upx;
	}

	.body_item_right {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: flex-end;
	}

	.time {
		color: #CCCCCC;
		font-size: 24upx;
		margin-bottom: 18upx;
		display: flex;
		flex-direction: row-reverse;
	}

	.state1 {
		width: 100upx;
		height: 58upx;
		background: #46CECF;
		color: #FFFFFF;
		line-height: 58upx;
		text-align: center;
		font-size: 26upx;
		border-radius: 10upx;
	}

	.state2 {
		font-size: 26upx;
		color: #999999;
	}

	.bottomborder {
		position: absolute;
		width: 600upx;
		border-bottom: 1upx solid #E6E6E6;
		bottom: 1upx;
		right: 0;
	}
</style>
